@import "../../variables.scss";

.search-box {
  @extend %hoverable;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  transition: background-color 150ms ease-in-out;
  border-left: 1px solid rgba($white, .05);

  &:focus-within {
    background-color: rgba($black, .15);
  }

  &__icon {
    width: 1.25rem;
    height: 1.25rem;
    margin: .75rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../../assets/icons/search.svg');
  }

  input {
    background-color: transparent;
    outline: none;
    border: none;
    color: $white;
    font-size: .875rem;
    width: 12rem;
    height: 3rem;
    z-index: 5000;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;

    &::placeholder {
      color: rgba($white, .15);
    }
  }

  &__results {
    @extend %column-nowrap;
    background-color: mix($regal-blue, $black, 20);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: 0 4px 8px 0 rgba($black, .5);
    max-height: 22.5rem;
    overflow-y: auto;

    &__item {
      @extend %row-nowrap;
      @extend %clickable;

      align-items: center;
      color: rgba($white, .5);
      padding: .5rem 1rem;
      font-weight: 300;
      line-height: 1rem;
      font-size: .75rem;
    }

    &__label {
      color: rgba($white, .8);
      font-size: .875rem;
    }

    &__stats {
      text-align: right;
      flex: 1 1 auto;
      width: 0;
      height: 2rem;

      div + div {
        margin-top: 2px;
      }
    }
  }

  &__results-group {
    @extend %column-nowrap;

    &--favorite {
      box-shadow: 0 1px 0 0 rgba($white, .15);
    }
  }
}